<script setup>
    import axios from "axios"
    import List from './List.vue'
    import { ref } from 'vue'
    const trueKey='248789'
    const input = ref('')
    let active = ref(false)
    let chance = ref(5)
    const unlock =()=>{
        if(input.value===trueKey)
        {
            active.value = true;
        }else{
            chance.value--
            alert('密码错误，还有'+chance.value+'次机会')
            if(chance.value===0){
                chance.value=true
                active.value=true
            }
        }
    }

</script>
<template>
    <main v-if='!active'>
        <head>输入密码查看通讯录</head>
        <div class="input">
            <el-input
    v-model="input" 
    type="password"
    placeholder="Please input password"
    show-password
    class="el-input"
    @keyup.enter="unlock"
  />
        </div>
        <div class="input">
        <el-button @click="unlock" class="unlock" type="success">解锁</el-button>
        </div>
    </main>
    <div v-else>
    <List></List>
    </div>
</template>
<style lang='stylus'>
head
    margin-top 60px;
    color #25b695
    display flex
    font-size 35px
    justify-content center
.input
    margin-top 20px
    display flex
    justify-content center
    .el-input
        width 400px
</style>